<template>
  <view class="cabinetDetail">
    <!-- <nut-watermark :z-index="999" content="小刘"></nut-watermark> -->
    <scroll-view 
        style="height: 100%;"
        :scroll-y="true"
      >
      <nut-cell-group title="设备详情" desc="">
        <nut-cell title="场地名称">
          <template #desc>
            <span>{{cabinetDetailData.f_field_name}}</span>
          </template>
        </nut-cell>
        <nut-cell title="设备名称">
          <template #desc>
            <span>{{cabinetDetailData.c_cabinet_name}}</span>
          </template>
        </nut-cell>
        <nut-cell title="设备编码">
          <template #desc>
            <span>{{cabinetDetailData.c_code}}</span>
          </template>
        </nut-cell>
        <nut-cell title="安装地址">
          <template #desc>
            <span>{{cabinetDetailData.c_install_area}}</span>
          </template>
        </nut-cell>
        <nut-cell title="在线状态">
          <template #desc>
            <nut-tag v-if="cabinetDetailData.c_activate == 1" type="success">在线</nut-tag>
            <nut-tag v-else-if="cabinetDetailData.c_activate == -1" type="warning">离线</nut-tag>
          </template>
        </nut-cell>
        <nut-cell title="最后在线时间">
          <template #desc>
            <span>{{cabinetDetailData.c_last_end_time}}</span>
          </template>
        </nut-cell>
        <nut-cell title="设备组数">
          <template #desc>
            <span>{{cabinetDetailData.c_cabinet_num}}</span>
          </template>
        </nut-cell>
        <nut-cell title="眼镜层数">
          <template #desc>
            <span>{{cabinetDetailData.c_glasses_layer}}</span>
          </template>
        </nut-cell>
        <nut-cell title="每层组数">
          <template #desc>
            <span>{{cabinetDetailData.c_layer_group}}</span>
          </template>
        </nut-cell>
        <nut-cell title="每组数量">
          <template #desc>
            <span>{{cabinetDetailData.c_group_glasses_num}}</span>
          </template>
        </nut-cell>
      </nut-cell-group>
      <nut-tabs v-model="cabinetNum" type="smile" @click="changeTabGetData">
        <nut-tab-pane :title="'设备' + item"  :pane-key="item" v-for="item in totalCabinet" >
          <nut-cell-group>
            <!-- title="'货道'  + cabinetItem.p_freight_lane + '('+ cabinetItem.p_glasses_type + ')'" -->
            <nut-cell center  v-for="cabinetItem in cabinetDataList['data' + item]"  :key="cabinetItem">
              <template #title>
                <div>货道{{  cabinetItem.p_freight_lane }}({{ cabinetItem.p_glasses_type }})<br/><span class="maxGlass">最大眼镜数{{ cabinetItem.p_max_number }}</span></div>
              </template>
              <template #desc>
                <nut-input-number v-model="cabinetItem.p_existing_number" :max="cabinetItem.p_max_number"/>
              </template>
            </nut-cell>
          </nut-cell-group>
          <view class="btnContainer">
            <nut-button type="info" @tap='saveData'>确认保存</nut-button>
            <nut-button type="warning" @tap="oneClickCompletion">一键补齐</nut-button>
          </view>
          </nut-tab-pane>
          
      </nut-tabs>
      <nut-action-sheet
        v-model:visible="chooseIsVisible"
        :menu-items="menuItems"
        @choose="chooseItem"
      />
    </scroll-view>
    
  </view>
</template>

<script setup>
import './index.scss';
import { ref } from 'vue';
import Taro, {useDidShow} from '@tarojs/taro'
import {query_equipment_params, update_equipment_params, initialization_equipment} from '../../https/api'

const cabinetDetailData = ref({})
const cabinetNum = ref(1)
const totalCabinet = ref(1)
const PCCode = ref('')
const cabinetDataList = ref({})

const chooseIsVisible = ref(false)
const menuItems = [
      {
        name: '全部'
      },
      {
        name: '成人款'
      },
      {
        name: '儿童款'
      },
      {
        name: '挂夹款'
      }
    ];
const changeTabGetData = (data) => {
  getCurrentData(PCCode.value, data.paneKey)
}

const chooseItem = (value) => {
  Taro.showModal({
    title: '温馨提示',
    content: `确认要一键补齐${value.name}数据?`,
    success: function (res) {
      if (res.confirm) {
        initialization_equipment({p_c_code: PCCode.value, type: value.name}).then(res => {
          if (res.code == 1000) {
            for(let i = 0; i< totalCabinet.value; i++) {
              cabinetDataList.value['data' + (i+ 1)] = []
            }
            Taro.showToast({
              title: '补齐成功',
              icon: 'none',
              duration: 2000
            })
            getCurrentData(PCCode.value, 1)
          }else {
            Taro.showToast({
              title: '补齐失败',
              icon: 'none',
              duration: 2000
            })
          }
        })
      } else if (res.cancel) {
        console.log('用户点击取消')
      }
    }
   })
}

const saveData = () => {
  let sendData = []
  for(let key in cabinetDataList.value) {
    sendData = [...sendData, ...cabinetDataList.value[key]]
  }
  console.log(sendData)
  let temp = []
  sendData.forEach(item => {
    temp.push({p_id: item.p_id, p_existing_number: item.p_existing_number * 1})
  })
  update_equipment_params({params_list: [...temp]}).then(res => {
    if(res.code == '1000') {
      Taro.showToast({
        title: '保存成功',
        icon: 'none',
        duration: 2000
      })
    }
  })
}

const oneClickCompletion = () => {
  chooseIsVisible.value = true;
   
}
const getCurrentData = (code, index) => {
  if (cabinetDataList.value['data' + index].length <= 0) {
    query_equipment_params({p_c_code: code, p_group_code: index}).then(res => {
      cabinetDataList.value['data' + index] = res.data
    })
  }
  
}
useDidShow(() => {
  let params =Taro.getCurrentInstance().router.params
  cabinetDetailData.value = JSON.parse(params.data)
  totalCabinet.value = cabinetDetailData.value.c_cabinet_num
  for(let i = 0; i< totalCabinet.value; i++) {
    cabinetDataList.value['data' + (i+ 1)] = []
  }
  console.log(cabinetDataList.value)
  PCCode.value =  cabinetDetailData.value.c_code
  getCurrentData(PCCode.value, 1)


})
</script>

<style>
.maxGlass {
  color: var(--nut-primary-color, var(--nut-primary-color, #fa2c19));
  font-size: var(--nut-cell-title-font, var(--nut-font-size-2, 24rpx));
}
</style>